<template>
  <div style="width: 1000px;">
    <el-row>
      <el-col :span="4">
        <h2 style="margin-left: 5px;margin-bottom: 10px">个人主页</h2>
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose">
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">我的主页</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-apple"></i>
            <span slot="title">我的关注</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-document"></i>
            <span slot="title">我的粉丝</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <el-card>
          <div style=";height: 100%;position: relative">
            <div style="position: relative;z-index: 0">
              <el-carousel height="400px">
                <el-carousel-item v-for="imageUrl in urls" :key="imageUrl">
                  <img :src="imageUrl" alt="carousel image" style="width: 100%; height: 100%; object-fit: cover;">
                </el-carousel-item>
              </el-carousel>
            </div>
            <div style="position: relative;z-index: 1;top: -30px;left: 30px;display: flex">
              <div>
                <el-avatar :size="90"
                           :src="imgUrl"></el-avatar>
              </div>
              <div style="margin-top: 35px;margin-left: 10px">
                <p style="font-size: 20px;margin-bottom: 10px"><b>{{ user.username }}</b></p>
                <p><b>{{ user.created }}</b></p>
              </div>
            </div>
          </div>
          <el-divider/>

          <el-menu :default-active="activeIndex"
                   class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1" @click="elMenu('1')">精选</el-menu-item>
            <el-menu-item index="2" @click="elMenu('2')">微博</el-menu-item>
            <el-menu-item index="3" @click="elMenu('3')">相册</el-menu-item>
          </el-menu>
        </el-card>

        <div style="margin-top: 20px">
          <el-card>
            <router-view/>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      urls: [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
      ],
      activeIndex:'2',
      imgUrl:require('/public/static/image.jpg')
    };
  },
  methods: {
    elMenu(index){
      if (index!=null){
        localStorage.setItem('el-menu',index)
      }
      this.activeIndex = localStorage.getItem('el-menu')
    },
    handleOpen(){

    },
    handleClose(){

    }
  },
  mounted() {
    this.user = JSON.parse(localStorage.getItem("user"))
    if (this.user == null) {
      this.$message.error("当前未登录，请前往登录！！！")
      this.$router.push("/login")
    }
    this.elMenu(null)

  }
};
</script>
<style scoped>
.el-menu--horizontal>.el-menu-item.is-active,.el-menu--horizontal>.el-menu-item{
  font-size: 25px;
}

.el-menu-demo{
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.el-menu {
  border: none;
}
</style>